<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>登录</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="shortcut icon" href="/images/anime.png">
  <link rel="bookmark" href="/images/anime.png">
</head>
<body>
<!-- 你的 HTML 代码 -->
<div class="layui-container">
  <div class="layui-row">
  <fieldset class="layui-elem-field layui-col-md4 layui-col-md-offset4 " >
    <legend>登录</legend>
    <div class="layui-field-box">
      <form class="layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
        </div>
      </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="login">立即登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </fieldset>
  </div>
</div>
<script src="/layui/layui.js"></script>
<script>
  layui.use(['jquery','layer', 'form'], function(){
    var layer = layui.layer,form = layui.form;
    var $ = layui.jquery;
    //表单验证（页面自动关联,验证结果绑定在表单）
    form.verify({
      email:function (value, item){//value：表单的值、item：表单的DOM对象 自定义验证规则
        if (/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
      },
      password:function (value, item) {

        if (!/^.{3,12}$/.test(value)){

          return '密码必须为3~12位';
        }
      },
    });

    form.on('submit(login)',function (data) {
      // 第一获取账号密码
      var user = {
        email:$('input[name="email"]').val(),
        password:$('input[name="password"]').val()
      };

      //提交数据到服务器
      $.ajax({
        url:"/dologin",
        type:"post",
        contentType:"application/json",
        dataType:"json",
        data:JSON.stringify(user),
        beforeSend:function () {
          //请求发送之前，打开圆圈进度条
          layer.load(2,{

            shade:[0.5,"#333"]
          });
        },
        success : function (data){
          //网络请求成功，判断用户登陆成功或失败
          if(data.status == 1){
            layer.msg("登录成功");
            setTimeout(function (){
              location.href = "/main";
            },1000);
          }else {
            layer.msg("针不戳");
          }


        },
        error : function () {
          //网络请求失败，提示请求失败
          layer.msg("登录失败");
          
        },
        complete : function () {
          //请求完成，关闭圆圈进度条
          layer.closeAll("loading");

        }

      });


      return false;

    })



  });
</script>
</body>
</html>